import {FC, memo, ReactNode,useEffect} from "react";
import   recommendSongs   from "@/assets/data/recommended-songs.json"
import { fetchRecommendAlbums } from "@/store/modules/recommend";
import TopBanner from "@/views/discover/c-views/recommend/c-cpns/top-banner";
import HotRecommend from "@/views/discover/c-views/recommend/c-cpns/hot-recommend";
import RankBoard from "@/views/discover/c-views/recommend/c-cpns/RankBoard";
import { useAppDispatch, useAppSelector } from "@/hooks/store";
import { Box } from "@chakra-ui/react";
interface IProps {
    children?: ReactNode
}


const Recommend :FC<IProps>  = () =>{

    const dispatch = useAppDispatch()
    const {albums} = useAppSelector(state => state.recommend)

    return(
        <Box>
            <TopBanner />

            <HotRecommend  albums={albums} />

            <RankBoard />
        </Box>
    )
}

export default memo( Recommend)